<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container">
        <el-table v-loading="listLoading" style="width: 100%" :data="visitors" size="small" element-loading-text="正在加载足迹数据"
            fit highlight-current-row>
            <!-- <el-table-column label="客户" :width="180">
                <template slot-scope="scope">
                    <div class="user-block" v-if="scope.row.user">
                        <el-avatar :src="scope.row.user.avatar + '?imageView2/2/w/100'" size="small" />
                        <span class="name">
                            <span v-if="scope.row.user.mobile">{{ scope.row.user.mobile }}</span>
                            <span v-else>{{ scope.row.user.nickname }}</span>
                        </span>
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column prop="name" label="详情" />
            <el-table-column prop="seconds" label="停留时长" width="80" />
            <el-table-column prop="created_at" label="访问时间" width="120" />
        </el-table>

        <div class="pager">
            <el-pagination hide-on-single-page background layout="total, prev, pager, next, jumper" :total="total"
                :page-size="per_page" @current-change="updateCurrentPage" />
        </div>
        <div style="display:flex;justify-content:center;margin-top:20px;">
            <el-button v-loading="downloading" :disabled="downloading" type="primary" plain round icon="el-icon-download"
                @click="downloadHandle">下载导出</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.app-container {
    .user-block {
        display: flex;
        align-items: center;

        .name {
            margin-left: 10px;
        }
    }
}
</style>

<script>
//  TODO  访客足迹可以导出excel
import { getVisitorActions,exportVistorAction } from "@/api/visitor";
import { getToken } from "@/utils/auth";

export default {
    name: "Visitors",
    components: {},

    props: {
        userId: { type: Number, default: null },
        targetType: { type: String, default: "post" },
        targetId: { type: Number, default: null },
        visitorId: { type: String, default: '' }
    },
    data: function () {
        return {
            downloading: false,
            dateRange: null,
            visitors: [],
            listLoading: true,
            current_page: 1,
            per_page: 10,
            total: 0,
            current_page: 1
        };
    },

    computed: {
        date_range_str: function () {
            if (!this.dateRange) {
                return "";
            }
            var d1 = new Date(this.dateRange[0]);
            var d2 = new Date(this.dateRange[1]);
            return d1.toLocaleDateString() + "," + d2.toLocaleDateString();
        }
    },

    watch: {
        userId: function (val, oldVal) {
            this.loadData();
        },
        visitorId: function (val, oldVal) {
            this.loadData();
        },
        current_page: function (newVal, oldVal) {
            this.loadData();
        },
        per_page: function (newVal, oldVal) {
            this.loadData();
        }
    },

    created () {
        this.loadData();
    },

    methods: {
        downloadHandle: function () {
            this.downloading = true;
            var _this = this;
            exportVistorAction({
                order: "id desc",
                user_id: this.userId,
                uid: this.visitorId,
                download: true,
            }).then(res  =>{
                this.downloading = false;
                    const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

                    // 创建一个a标签
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob); // 设置文件的URL
                    link.download = '访客足迹表.xlsx'; // 设置文件的下载名称

                    // 模拟用户点击链接进行下载
                    link.click();

                    // 释放URL对象
                    URL.revokeObjectURL(link.href);
                })
                .finally(() => {
                    this.downloading = false;
                    this.listLoading = false;
                });
        },
        updateCurrentPage: function (page) {
            this.current_page = page;
        },

        loadData: function () {
            this.listLoading = true;
            var _this = this;
            getVisitorActions({
                order: "id desc",
                user_id: this.userId,
                uid: this.visitorId,
                page: _this.current_page,
                per_page: _this.per_page
            }).then(resp => {
                _this.visitors = resp.data.result;
                _this.total = resp.data.page.total_items;
                _this.listLoading = false;
            });
        }
    }
};
</script>